<template>
	<div class="NodealReadPage">
		<HeaderTab>
			<div slot="left">
				<a @click="prev()" class="glyphicon glyphicon-menu-left return_but"></a>
			</div>
			<!-- 由于渲染速度的问题，刚进来的时候html先渲染，
			nodealReadData[0].chapter_title 就是undefined啊，
			针对这一个解决办法，可以给父标签一个  v-if="list[0]" ，
			等有这个元素后才显示，就不会报错了 -->
			<div slot="center" class="header_center">
				{{chapter_title}}
			</div>
		</HeaderTab>
		<div class="novel_text" id="div1"></div>
		<div><p class="nodel_pre" v-for="booktext in bookReadData">{{booktext}}</p></div>
	</div>
</template>
<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab';
	import $ from 'jquery'

	export default {
		name: 'NodealReadPage',
		components: {
			HeaderTab
		},
		methods: {
			prev() {
				this.$router.go(-1)
			},
		},
		data() {
			return {
				chapter_title: '',
				bookReadData: ''
			}
		},
		created() {
			// 获取上一个组件跳转过来时携带的query参数id($route是当前活动路由)
			let chapter_id = this.$route.params.id;

			this.axios.get('http://192.168.43.169/api/nodeal_read/' + chapter_id).then((response) => {
				let resdata = response.data;
				this.chapter_title = response.data.data[0].chapter_title;
				if (resdata.code == 200) {
					// 获取文件名
					let name_1 = resdata.data[0].chapter_path
					let name_arr_1 = name_1.split('/');
					let name_2 = name_arr_1[name_arr_1.length - 1];
					let name_arr_2 = name_2.split('.');
					let filename = name_arr_2[0]
					console.log(filename)
					this.axios({
						method: 'get',
						url: 'http://192.168.43.169/api/nodeal_text/' + filename
					}).then((response_1) => {
						let text = response_1.data
						let na_arr = text.split('<br>');
						this.bookReadData = na_arr
					});
				}
			});
		},
	}
</script>

<style>
	.NodealReadPage {
		background-image: url("~assets/img/backgroud_img/001.jpg");
		background-size: 100%;
		background-attachment: fixed
	}

	.novel_text {
		margin-top: 40px;
		color: #000000;
	}

	.iframe_file {
		width: 100%;
	}
</style>
